<template>
	<view>
		<view class="topView">
			
		</view>
		<view class="title">
			实名认证安全保障
		</view>
		<view class="title1">为了保障您的资金安全，请填写与您身份证上的信息，否则不会通过认证。</view>
		<view class="bgView">
			<view class="title2">
				填写身份信息
			</view>
			<view class="flex-row-flex-start" style="height: 118rpx;">
				<view class="title3">
					姓名
				</view>
				<view class="inputView flex1">
					<input v-model="cert_name" type="text" placeholder="请填写姓名">
				</view>
			</view>
			<view class="line">
				
			</view>
			<view class="flex-row-flex-start" style="height: 118rpx;">
				<view class="title3">
					身份证号
				</view>
				<view class="inputView flex1">
					<input v-model="cert_no" type="text" placeholder="请填写身份证号">
				</view>
			</view>
			<view class="line">
				
			</view>
			
			<view class="itemView flex-row-space-between">
				<view class="title4">
					身份证照片
				</view>
			</view>
			
			<view class="flex-row-space-between">
				<view class="">
					<uploader @after-read="afterRead1" useSlot>
						<image mode="scaleToFill" class="uploadImage1"
							:src="ocr_front || require('../../static/settled/6.png')" />
					
					</uploader>
				</view>
				<view class="">
					<uploader @after-read="afterRead2" useSlot>
						<image mode="scaleToFill" class="uploadImage1"
							:src="ocr_back || require('../../static/settled/5.png')" />
						
					</uploader>
				</view>
			</view>

		</view>
		<view @click="buttonClick()" class="button flex-column-center">
			提交
		</view>
	</view>
</template>

<script>
	import {
		uploadFile,
		isWeixinClient,
		trottle,
	
	} from '@/utils/tools'
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		getUserInfo,
		setUserInfo,
	} from "@/api/user";
import {
		alipayAuth, 
		search_verify
	} from '@/api/user.js';
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				userInfo:{},
				cert_name:'',
				cert_no:'',
				ocr_front:'',
				ocr_back:'',
			}
		},
		onShow() {

		},
		onLoad(e) {
			// this.$getUserInfo()
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},

		methods: {
			afterRead1(e) {
			
				const file = e
				console.log(file)
				file.forEach(item => {
					uploadFile(item.path).then(res => {
						uni.hideLoading();
					
							this.ocr_front = res.url
						
			
			
					});
				})
			},
			afterRead2(e) {
			
				const file = e
				console.log(file)
				file.forEach(item => {
					uploadFile(item.path).then(res => {
						uni.hideLoading();
					
							this.ocr_back= res.url
						
			
			
					});
				})
			},
			$getUserInfo() {
				getUserInfo().then(res => {
					if (res.code == 1) {
						this.userInfo = res.data;
						this.$store.commit('SETUSERINFO', res.data);
					}
				});
			},
			search_verify(certify_id){
				var that=this
				search_verify({
					certify_id
				}).then(res => {
					console.log('search_verify',res)
					that.showToast(res.msg)
					if(res.code==1){
						   setTimeout(() => {
						               uni.navigateBack()   
						                }, 2000)
					}
					// that.$getUserInfo()
				});
			},
			startAPVerify(data){
				var that=this
				my.startAPVerify({
				  url:data.url,
				  certifyId: data.certify_id,
				  success: function (res) {
				    console.log('success', res)
					that.search_verify(data.certify_id)
				  },
				  fail: function (res) {
				    console.log('fail', res)
				  },
				  complete: function (res) {
				    console.log('complete', res)
				  }
				})
			},
			buttonClick(){
				if (!this.cert_name.length) {
					this.showToast('请输入姓名')
					return
				}
				if (!this.cert_no.length) {
					this.showToast('请输入身份证号')
					return
				}
				if (!this.ocr_front.length) {
					this.showToast('请输入身份证正面')
					return
				}
				if (!this.ocr_back.length) {
					this.showToast('请输入身份证反面')
					return
				}
				uni.showLoading({
					mask:true
				})
				var that=this
				alipayAuth({
					cert_name:this.cert_name,
					cert_no:this.cert_no,
					ocr_front:this.ocr_front,
					ocr_back:this.ocr_back
				}).then(res => {
					uni.hideLoading()
					that.showToast(res.msg)
					if(res.code==1){
						uni.navigateBack()
						// that.startAPVerify(res.data)
					}
					
				});
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
	.topView {
		height: 648rpx;
		
		background-image: url($baseUrl+'/shiMing1.png');

		background-size: 100% 100%;

	}
	.title{
		margin-top: -410rpx;
		margin-left: 208rpx;
		
		font-size: 38rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 580;
		color: #fff;
	}
	.title1{
		margin-top: 13rpx;
		margin-left: 208rpx;
		font-size: 27rpx;
		margin-right: 60rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffffB3;
		line-height: 50rpx;
	}
	.bgView{
		padding: 30rpx;
		margin: 38rpx;
		background: #FFFFFF;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		opacity: 1;
	}
	.title2{
		margin-bottom: 20rpx;
		font-size: 31rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}
	.title3{
		width: 140rpx;
		font-size: 27rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}
	.title4{
		margin-top: 30rpx;
		font-size: 27rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}
	.inputView{
		input{
			font-size: 27rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 550;
			color: #333333;
		}
	}
	.line{
		height: 2rpx;
		background: #F6F9FB;
	}
	.button{
		margin: 135rpx 38rpx;
		height: 86rpx;
		background: #FF4D40;
		border-radius: 69rpx 69rpx 69rpx 69rpx;
		opacity: 1;
		font-size: 27rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.uploadImage1{
		margin-top: 30rpx;
		width: 326*0.9rpx;
		height: 198*0.9rpx;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}
</style>